<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
        table {
            border: 1px solid gray;
            border-collapse: collapse;
            border-spacing: 0;
        }

        th,
        td {
            border: 1px solid gray;
            text-align: center;
            padding: 10px 20px;
        }
        input{
            width: 60px;
            height: 8px;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="add">添加</button>
        <table >
            <tr >
                <th>id</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>操作</th>
            </tr>
            
            <tr v-for="(item, index) in goods" :key="index">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td><button @click="reduce(index)" :disabled="item.count==0">-</button>{{item.count}}<button @click="plus(index)">+</button></td>
                <td><button @click="deleteGoods(index)">移除</button></td>
            </tr>
            <tr v-if="addone">
                <td ><input type="text" v-model="id"></td>
                <td ><input type="text" v-model="name"></td>
                <td ><input type="text" v-model="price"></td>
                <td ><input type="text" v-model="count"></td>
                <td><button @click="confirm">确认</button></td>
            </tr>
        </table>
        
            <h1  v-if="goods.length<1">购物车为空！！</h1>
            <h1 v-else>{{totalprice | price}}</h1>

    </div>
</body>
<script>
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                id:'',
                name:'',
                price:'',
                count:'',
                
                goods: [{ id: 1, name: "充电宝", price: 99.111, count: 1 },
                { id: 2, name: "小风扇", price: 88.222, count: 1 },
                { id: 3, name: "小音箱", price: 125.533, count: 1 },
                { id: 4, name: "蓝牙耳机", price: 315.344, count: 1 },],
                addone:false
            }
        },
        methods: {
            deleteGoods(index){
                this.goods.splice(index,1)
                
            },
            add(){
                this.addone=true
            },
            confirm(){
                this.goods.push({id: this.id, name: this.name, price: this.price, count: this.count})
                this.addone=false
            },
            reduce(index){
                this.goods[index].count--
            },
            plus(index){
                this.goods[index].count++
            },
        },
        computed:{
            totalprice(){
                let sum=0
                for (let index = 0; index < this.goods.length; index++) {
                    
                    sum += this.goods[index].count*this.goods[index].price;
                    
                }
                return sum.toFixed(2)
            },
        },
        filters:{
            price(value){
                
                return '总价格: ￥'+value+'元'
            }
        }
    })
</script>

</html>